<template>
	<div class="footer-main">
		<div class="footer-con cc">
			<router-link :class="[{'on': headerData.path == item.path}, 'footer-item']" v-for="item in headerData.menuList" :to="item.path">
			<i v-if="item.path == '/loans/achievement'" class="icon icon-yejibaochou"></i>
			<i v-if="item.path == '/loans/actual'" class="icon icon-sj_shishichengjiaojiage"></i>
			<i v-if="item.path == '/loans/credit'" class="icon icon-shenpi"></i>
			<i v-if="item.path == '/loans/storage'" class="icon icon-woyaohuankuanweixuanzhong"></i>
			<i v-if="item.path == '/loans/afterloan'" class="icon icon-daiqianguanli"></i>
			<i v-if="item.path == '/loans/hr'" class="icon icon-renlifazhan"></i>
			{{item.title.replace('云贷-', '')}}</router-link>
		</div>
	</div>
</template>
<script>
export default {
	name: 'dy-footer',
	data () {
		return {}
	},
	computed: {
		headerData () {
			return this.$store.getters.headerData
		}
	}
}
</script>
<style lang="less" scope>
@import '../assets/less/base.less';
.footer-main {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2rem;	
	padding: .2rem 0;
	line-height: 1rem;	
	border-top: @border; 
	background-color: #f7f7f7;
	color: #9c9c9c;
	overflow-y: scroll;
	z-index: 2;

	.footer-con {		
		width: 17.4rem;
	}

	.footer-item {
		float: left;
		width: 2.9rem;
		box-sizing: border-box;
		text-align: center;		

		i {
			color: #ff7327;
			display: block;
		}
		
		&.on {
			color: @on-color;
		}
	}
}
</style>
